<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Camera - Documentation</title>

    <script src="scripts/prettify/prettify.js"></script>
    <script src="scripts/prettify/lang-css.js"></script>
    <!--[if lt IE 9]>
      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <link type="text/css" rel="stylesheet" href="styles/prettify.css">
    <link type="text/css" rel="stylesheet" href="styles/jsdoc.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<input type="checkbox" id="nav-trigger" class="nav-trigger" />
<label for="nav-trigger" class="navicon-button x">
  <div class="navicon"></div>
</label>

<label for="nav-trigger" class="overlay"></label>

<nav>
    <h2><a href="index.html">Home</a></h2><h3>Modules</h3><ul><li><a href="module-Camera.html">Camera</a><ul class='methods'><li data-type='method'><a href="module-Camera.html#.focusOnBounds">focusOnBounds</a></li><li data-type='method'><a href="module-Camera.html#.focusOnLocation">focusOnLocation</a></li><li data-type='method'><a href="module-Camera.html#.onCameraChange">onCameraChange</a></li><li data-type='method'><a href="module-Camera.html#.orbitTarget">orbitTarget</a></li><li data-type='method'><a href="module-Camera.html#.setCameraMode">setCameraMode</a></li></ul></li><li><a href="module-Controls.html">Controls</a><ul class='methods'><li data-type='method'><a href="module-Controls.html#.configureControls">configureControls</a></li></ul></li><li><a href="module-Core.html">Core</a><ul class='methods'><li data-type='method'><a href="module-Core.html#.datafileForLocation">datafileForLocation</a></li><li data-type='method'><a href="module-Core.html#.displayLocation">displayLocation</a></li><li data-type='method'><a href="module-Core.html#.init">init</a></li><li data-type='method'><a href="module-Core.html#.onBoundsFocused">onBoundsFocused</a></li><li data-type='method'><a href="module-Core.html#.onLocationError">onLocationError</a></li><li data-type='method'><a href="module-Core.html#.onLocationFocused">onLocationFocused</a></li><li data-type='method'><a href="module-Core.html#.onLocationLoaded">onLocationLoaded</a></li><li data-type='method'><a href="module-Core.html#.onUserInteraction">onUserInteraction</a></li><li data-type='method'><a href="module-Core.html#.setDisplayErrors">setDisplayErrors</a></li></ul></li><li><a href="module-Environment.html">Environment</a><ul class='methods'><li data-type='method'><a href="module-Environment.html#.environmentEditor">environmentEditor</a></li><li data-type='method'><a href="module-Environment.html#.setEnvironment">setEnvironment</a></li></ul></li><li><a href="module-Features.html">Features</a><ul class='methods'><li data-type='method'><a href="module-Features.html#.addBuiltinOverlay">addBuiltinOverlay</a></li><li data-type='method'><a href="module-Features.html#.addOverlay">addOverlay</a></li><li data-type='method'><a href="module-Features.html#.focusOnFeature">focusOnFeature</a></li><li data-type='method'><a href="module-Features.html#.highlightFeature">highlightFeature</a></li><li data-type='method'><a href="module-Features.html#.onFeatureClicked">onFeatureClicked</a></li><li data-type='method'><a href="module-Features.html#.onFeatureSelected">onFeatureSelected</a></li><li data-type='method'><a href="module-Features.html#.onOverlayAdded">onOverlayAdded</a></li><li data-type='method'><a href="module-Features.html#.removeOverlay">removeOverlay</a></li><li data-type='method'><a href="module-Features.html#.updateOverlay">updateOverlay</a></li></ul></li><li><a href="module-Location.html">Location</a><ul class='methods'><li data-type='method'><a href="module-Location.html#.setUserLocation">setUserLocation</a></li><li data-type='method'><a href="module-Location.html#.toggleUserLocationTracking">toggleUserLocationTracking</a></li></ul></li><li><a href="module-Rendering.html">Rendering</a><ul class='methods'><li data-type='method'><a href="module-Rendering.html#.pause">pause</a></li><li data-type='method'><a href="module-Rendering.html#.play">play</a></li></ul></li><li><a href="module-UI.html">UI</a><ul class='methods'><li data-type='method'><a href="module-UI.html#.setCameraModeControlVisible">setCameraModeControlVisible</a></li><li data-type='method'><a href="module-UI.html#.setCompassVisible">setCompassVisible</a></li><li data-type='method'><a href="module-UI.html#.setRotationControlVisible">setRotationControlVisible</a></li><li data-type='method'><a href="module-UI.html#.setUserLocationControlVisible">setUserLocationControlVisible</a></li><li data-type='method'><a href="module-UI.html#.setZoomControlVisible">setZoomControlVisible</a></li></ul></li></ul>
</nav>

<div id="main">
    
    <h1 class="page-title">Camera</h1>
    

    




<section>

<header>
    
        
            
        
    
</header>

<article>
    <div class="container-overview">
    
        
            <div class="description">Use the Camera API methods to change the user's
view of the rendered scene.</div>
        

        
            




<dl class="details">

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    
</dl>





























        
    
    </div>

    

    

    

     

    

    

    
        <h3 class="subsection-title">Methods</h3>

        
            

    

    <h4 class="name" id=".focusOnBounds"><span class="type-signature">(static) </span>focusOnBounds<span class="signature">(bounds)</span><span class="type-signature"></span></h4>

    




<dl class="details">

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    
</dl>





<div class="description">
    Animates the engine camera to focus on a region
specified by a bounding box. The engine will calculate the correct
view such that the bounds are fully displayed.
</div>









    <h5>Example</h5>
    
    <pre class="prettyprint"><code>var bounds = {
  sw: { latitude: 44.5, longitude: 6.3 },
  ne: { latitude: 44.4, longitude: 6.4 }
};
Procedural.focusOnBounds ( bounds );

// Optionally can also supply:
// - viewing angle,
// - a bearing,
// - animation duration (in seconds)
var bounds = {
  sw: { latitude: 44.5, longitude: 6.3 },
  ne: { latitude: 44.4, longitude: 6.4 },
  angle: 25, bearing: 180,
  animationDuration: 0.5
};
Procedural.focusOnBounds ( bounds );</code></pre>




    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        

        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>bounds</code></td>
            

            <td class="type">
            
                
<span class="param-type">Object</span>


            
            </td>

            

            

            <td class="description last">An Object specifying a bounding box. Pass the coordinates for the south-west and north-east corners of the box.</td>
        </tr>

    
    </tbody>
</table>
















        
            

    

    <h4 class="name" id=".focusOnLocation"><span class="type-signature">(static) </span>focusOnLocation<span class="signature">(location)</span><span class="type-signature"></span></h4>

    




<dl class="details">

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    
</dl>





<div class="description">
    Animates the engine camera to focus on a location
</div>









    <h5>Example</h5>
    
    <pre class="prettyprint"><code>var target = { latitude: 44.5, longitude: 6.3 };
Procedural.focusOnLocation ( target );

// Optionally can also supply:
// - viewing angle,
// - a bearing,
// - a distance,
// - animation duration (in seconds)
var target = {
  latitude: 44.5, longitude: 6.3,
  angle: 20, bearing: 30, distance: 1000
  animationDuration: 0.5
};
Procedural.focusOnLocation ( target );</code></pre>




    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        

        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>location</code></td>
            

            <td class="type">
            
                
<span class="param-type">Object</span>


            
            </td>

            

            

            <td class="description last">An Object specifying a longitude and latitude</td>
        </tr>

    
    </tbody>
</table>
















        
            

    

    <h4 class="name" id=".onCameraChange"><span class="type-signature">(static) </span>onCameraChange<span class="signature">()</span><span class="type-signature"></span></h4>

    




<dl class="details">

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    
</dl>





<div class="description">
    Callback function for when the camera position
changes. Note this method will fire very often, so you
may want to throttle updates. Performing significant work
every time this method fires will negatively impact performance
</div>









    <h5>Example</h5>
    
    <pre class="prettyprint"><code>Procedural.onCameraChange = function ( location ) {
  // `location` will contain:
  // - longitude
  // - latitude
  // - height
  // - angle
  // - bearing
  // - distance
  console.log( 'Location changed': location );
};</code></pre>


















        
            

    

    <h4 class="name" id=".orbitTarget"><span class="type-signature">(static) </span>orbitTarget<span class="signature">()</span><span class="type-signature"></span></h4>

    




<dl class="details">

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    
</dl>





<div class="description">
    Animates the engine camera around the current
camera target
</div>

























        
            

    

    <h4 class="name" id=".setCameraMode"><span class="type-signature">(static) </span>setCameraMode<span class="signature">(mode)</span><span class="type-signature"></span></h4>

    




<dl class="details">

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    
</dl>





<div class="description">
    Selects the current camera mode for the engine
</div>









    <h5>Example</h5>
    
    <pre class="prettyprint"><code>Procedural.setCameraMode ( '2D' );</code></pre>




    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        

        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>mode</code></td>
            

            <td class="type">
            
                
<span class="param-type">String</span>


            
            </td>

            

            

            <td class="description last">An String specifying the camera mode. Currently '2D' and '3D' are supported</td>
        </tr>

    
    </tbody>
</table>
















        
    

    

    
</article>

</section>




</div>

<br class="clear">

<footer>
    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.6</a> using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
</footer>

<script>prettyPrint();</script>
<script src="scripts/linenumber.js"></script>
</body>
</html>